<template>
  <div class="table_layout ">
    <div class="table_title" flex="main:justify cross:center">
      <div flex>
        <p>创建人：{{ tableData.creator || '--' }}</p>
        <p style="margin-left:20px">创建时间：{{ tableData.createTime || '--' }}</p>
      </div>
      <div>
        <template v-if="!patternIsEdit">
          <el-button class="margin_left_10" type="primary" plain size="mini" @click="showShare = true">分享</el-button>
          <el-button class="margin_left_10" size="mini">打印</el-button>
          <el-button v-if="$store.state.archives.flag !== 2" class="margin_left_10" size="mini" type="warning" plain @click="patternIsEdit = true">编辑</el-button>
        </template>
        <template v-else>
          <el-button class="margin_left_10" size="mini" plain type="success" :loading="loading" @click="handleSave">保存</el-button>
          <el-button class="margin_left_10" size="mini" plain type="danger" @click="handleGetData">取消</el-button>
        </template>
      </div>
    </div>

    <div class="table_containter">
      <div class="container_title">
        <p>{{ $store.state.user.departmentName }}</p>
        <h1>送 达 回 证</h1>
      </div>
      <!-- <p class="text_align_right">编号：〔2021〕第0283号</p> -->
      <p class="text_align_right" style="margin-bottom:10px">编号：<input v-model="tableData.no" style="width:200px" type="text" class="custom_input" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit"></p>

      <table border="1" cellspacing="0" cellpadding="0" class="table_content">
        <tr>
          <td>送达的文书名称及文号</td>
          <td colspan="3">
            <input v-if="patternIsEdit" v-model="tableData.deliveryFile" type="text" class="custom_input">
            <span v-else>{{ tableData.deliveryFile }}</span>
          </td>
        </tr>
        <tr>
          <td>受送达人姓名（名称）</td>
          <td colspan="3">
            <input v-if="patternIsEdit" v-model="tableData.party" type="text" class="custom_input">
            <span v-else>{{ tableData.party }}</span>
          </td>
        </tr>
        <tr>
          <td>送达地点</td>
          <td colspan="3">
            <input v-if="patternIsEdit" v-model="tableData.address" type="text" class="custom_input">
            <span v-else>{{ tableData.address }}</span>
          </td>
        </tr>
        <tr>
          <td>送达人单位及送达人签名</td>
          <td colspan="3">
            <input v-if="patternIsEdit" v-model="tableData.unitPerson" type="text" class="custom_input">
            <span v-else>{{ tableData.unitPerson }}</span>

          </td>
        </tr>
        <tr>
          <td>送达方式</td>
          <td colspan="3" style="height:100px">
            <div v-if="patternIsEdit" class="box" flex="main:center cross:center">
              <el-radio-group v-model="tableData.deliveryWay">
                <div>
                  <el-radio :label="0">直接送达</el-radio>
                  <el-radio :label="1">留置送达</el-radio>
                  <el-radio :label="2">委托送达</el-radio>
                </div>
                <div style="margin-top:20px">
                  <el-radio :label="3">邮寄送达</el-radio>
                  <el-radio :label="4">转交送达</el-radio>
                  <el-radio :label="5">公告送达</el-radio>
                </div>
              </el-radio-group>
            </div>
            <div v-else>
              <ul flex="main:center">
                <li>{{ tableData.deliveryWay === 0?'√':'□' }}1.直接送达</li>
                <li style="margin-left:20px">{{ tableData.deliveryWay === 1?'√':'□' }}2.留置送达</li>
                <li style="margin-left:20px">{{ tableData.deliveryWay === 2?'√':'□' }}3.委托送达</li>
              </ul>
              <ul flex="main:center" style="margin-top:20px">
                <li>{{ tableData.deliveryWay === 3?'√':'□' }}4.邮寄送达</li>
                <li style="margin-left:20px">{{ tableData.deliveryWay === 4?'√':'□' }}5.转交送达</li>
                <li style="margin-left:20px">{{ tableData.deliveryWay === 5?'√':'□' }}6.公告送达</li>
              </ul>
            </div>
          </td>
        </tr>
        <tr>
          <td>签 收 人</td>
          <td colspan="3" style="height:100px">
            <div v-if="patternIsEdit" class="box" style="text-align:center;padding-top:20px">
              <el-radio-group v-model="tableData.signType">
                <div>
                  <el-radio :label="0">受送达人</el-radio>
                  <el-radio :label="1">委托代理人</el-radio>
                  <el-radio :label="2">代收人</el-radio>
                </div>
              </el-radio-group>
              <div v-if="tableData.signType === 2">
                （与受送达人关系 <input v-model="tableData.signRelation" type="text" class="custom_input"> ）
                （签名）<input v-model="tableData.signs" type="text" style="width:100px" class="custom_input">
              </div>
            </div>
            <div>
              {{ tableData.signType === 0?'√':'□' }}1.受送达人  {{ tableData.signType === 1?'√':'□' }}2.委托代理人 {{ tableData.signType === 2?'√':'□' }}3.代收人 <br>
              <span>
                （与受送达人关系 <input v-model="tableData.signRelation" type="text" class="custom_input" :readonly="true"> ）
                （签名）<input v-model="tableData.signs" type="text" style="width:100px" :readonly="true" class="custom_input">
              </span>
            </div>
          </td>
        </tr>
        <tr>
          <td>送达时间</td>
          <td colspan="3">
            <div v-if="patternIsEdit" class="box" flex>
              <input v-model="tableData.deliveryTimeDate" type="date" class="custom_input" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit">
              <input v-model="tableData.deliveryTimeTime" type="time" class="custom_input" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit">
            </div>
            <span v-else>
              {{ comDeliveryTime }}
            </span>
          </td>
        </tr>
        <tr>
          <td>见证人及其单位或住址</td>
          <td colspan="3">
            <div class="box" :style="!patternIsEdit && 'background:none'">
              <input v-model="tableData.witnessInfo" style="width:95%;margin-top:10px" type="text" class="custom_input" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit">
              <div style="margin-top:10px">
                （签名）
                <input v-model="tableData.witnessSign" type="text" class="custom_input" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit">
                <input v-model="tableData.witnessTime" style="margin-left:20px" type="date" class="custom_input" :class="patternIsEdit && 'patternIsEdit'" :readonly="!patternIsEdit">
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>备 注</td>
          <td colspan="3">
            <input v-if="patternIsEdit" v-model="tableData.remark" type="text" class="custom_input">
            <span v-else>{{ tableData.remark }}</span>
          </td>
        </tr>
      </table>

      <p class="margin_top_20">此文书由公安机关消防机构存档</p>
    </div>
    <!-- <transition name="el-zoom-in-center">
      <div v-show="patternIsEdit" class="table_shade" />
    </transition> -->

    <shareComponent v-model="showShare" />
  </div>

</template>

<script>
import { parseTime } from '@/utils/time'
// import { requestSave, requestGetById } from '@/api/home'
import shareComponent from './share'
export default {
  components: { shareComponent },
  data() {
    return {
      showShare: false,
      patternIsEdit: false,
      loading: false,
      url: '/delivery',
      tableData: {
        'address': 'string',
        'archivesId': 0,
        'deliveryFile': 'string',
        'signRelation': 'string',
        'witnessTime': parseTime(new Date(), '{y}-{m}-{d}'),
        'deliveryTime': '2021-05-18 05:03:58',
        'deliveryTimeDate': parseTime(new Date(), '{y}-{m}-{d}'),
        'deliveryTimeTime': parseTime(new Date(), '{h}:{i}'),
        'deliveryWay': 0,
        'id': 0,
        'no': 'string',
        'party': 'string',
        'remark': 'string',
        'signType': 0,
        'signs': 'string',
        'title': 'string',
        'unitPerson': 'string',
        'witnessInfo': 'string',
        'witnessSign': 'string'
      }
    }
  },
  computed: {
    comDeliveryTime() {
      return parseTime(`${this.tableData.deliveryTimeDate} ${this.tableData.deliveryTimeTime}:00`, '{y}年{m}月{d}日{h}时{i}分')
    }
  },
  created() {
    this.handleGetData()
  },
  methods: {
    handleSave() {
      const formData = JSON.parse(JSON.stringify(this.tableData))
      formData.archivesId = this.$route.query.archivesId
      formData.deliveryTime = `${formData.deliveryTimeDate} ${formData.deliveryTimeTime}:00`
      formData.witnessTime = `${formData.witnessTime} 00:00:00`
      formData.title = '送达回证'
      requestSave(formData, this.url).then(res => {
        this.$message.success('操作成功')
        this.$router.replace({ path: this.$route.path, query: { itemId: res.data, ...this.$route.query, isEdit: false }})
        this.handleGetData()
      })
    },
    handleGetData(come) {
      const itemId = this.$route.query.itemId
      this.patternIsEdit = come ? false : JSON.parse(this.$route.query.isEdit || 'false')
      if (!itemId) return
      requestGetById({ id: itemId }, this.url).then(res => {
        const formData = res.data
        const [deliveryTimeDate, deliveryTimeTime] = formData.deliveryTime.split(' ')
        formData.deliveryTimeDate = deliveryTimeDate
        formData.deliveryTimeTime = deliveryTimeTime
        formData.witnessTime = formData.witnessTime.split(' ')[0]
        this.tableData = formData
      })
    }

  }
}
</script>

